import React, { useState, useEffect } from 'react';
// import mainpage_bg_mobile from '../../../img/kc/mobile_form.jpg'

import { Input, List, Button, Pagination } from 'antd';
import { openNotification_util, fetchsync_util, convertISODateTimeToYYYYMMDDHHMM } from '../util/util.js'
import { useHistory } from 'react-router-dom';
import mainpage_bg from '../../../img/shipSRM/mobile_top.png'

var storage = window.localStorage;
const { Search } = Input;

const Normalitem = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var height = props.height
  return (
    <div style={{ width: "95%", marginLeft: "2.5%", height: height ? height : "0.8rem", position: "relative" }}>
      <div style={styles.lineitemnormal}>
        <span style={props.styleobj}>
          &nbsp;&nbsp;{props.label}&nbsp;:&nbsp;</span><span style={props.styleobjright}>{fitem[fkey]}</span></div>
      <div style={styles.lineleftstyle}>
      </div>
    </div>)

}

const Normalitemtwo = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var fkeytwo = props.keydtwo
  return (
    <div style={styles.listitemnormal}>
      <div style={styles.listitemleft}>
        &nbsp;&nbsp;{props.label}:&nbsp;&nbsp;

        <span style={{ fontWeight: "800", }}>
          {fitem[fkey]}</span></div>
      <div style={{ width: "50%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" }}>
        {props.labeltwo}:&nbsp;&nbsp;{fitem[fkeytwo]}&nbsp;&nbsp;</div>
    </div>

  )

}
const Mobile_gpd_list = () => {
  const history = useHistory();
  const [pagedata, setpagedata] = useState({
    ddata: [],
    pagesize: 5,
    current: 1,
    nowddata: []
  })

  //登出
  const handlelogout = () => {
    history.push({ pathname: '/mobile_login' });
    storage.islogin = "loginout"
  }
  //去首页
  const handletomainpage = () => {
    history.push({ pathname: '/shipSRM_mobile/mobile_mainpage' });
  }

  //进入来料检
  const toitem = (item) => {
    storage.preitem_gpd = JSON.stringify({ data: item, type: "edit" });
    history.push({ pathname: '/shipSRM_mobile/cgrk/mobile_gpd_form' });
  }

  const handleadd = () => {
    storage.preitem_gpd = JSON.stringify({ data: {}, type: "add" })
    history.push({ pathname: '/shipSRM_mobile/cgrk/mobile_gpd_form' });
  }

  //rtdata处理
  const dealwithrtdata = (obj) => {
    const ddd = [];
    for (let i = 0; i < obj.length; i++) {
      var origindata = obj[i];
      for (var keyt in origindata) {
        origindata[keyt] = origindata[keyt] ? origindata[keyt] : ""
      }
      origindata.key = i;
      origindata.xuhao = i + 1;
      origindata['scrq'] = origindata['scrq'].substring(0, 10)
      origindata.bgzsl = origindata.bgzsl?parseFloat(origindata.bgzsl).toFixed(1):""
      ddd.push(origindata)
    }
    var nowddata = ddd.slice((pagedata.current - 1) * pagedata.pagesize, pagedata.current * pagedata.pagesize)
    setpagedata(Object.assign({}, pagedata, { ddata: ddd, nowddata: nowddata }));
  }

  //查询方法
  const query = async () => {
    const url = "/admin/cwgl/gpd_list"
    let data = await fetchsync_util(url, 'POST', {}, "json")
    dealwithrtdata(data.resultdata);
  }

  const onShowSizeChange = (page) => {
    let nowddata = pagedata.ddata.slice((page - 1) * pagedata.pagesize, page * pagedata.pagesize)
    setpagedata(Object.assign({}, pagedata, { current: page, nowddata: nowddata }));
  }


  //componentdidmount
  useEffect(() => {
    query();
  }, []);


    return (
        <div style={{ height: "100vh", width: "100%", position: 'relative', backgroundColor: "white", overflow: "auto",scrollbarWidth: "none" }}>
    
          {/* 首页  */}
          <div style={{
          width: "100%", height: "38vw",
          backgroundImage: `url(${mainpage_bg})`,
          position: "relative", fontSize: "0.9rem",
          textIndent: "2rem", fontWeight: "500", color: "white", borderRadius: "0 0 15px 15px"
        }} >
            <br />&nbsp;&nbsp;&nbsp;&nbsp;工票单
            <Button type="primary" style={{ backgroundColor: "rgba(0,0,0,0.1)", height: "18%", position: "absolute", right: "1%", top: "5%", textAlign: "center" }}
              onClick={handlelogout}>
              登出
            </Button>
            <Button type="primary" style={{ backgroundColor: "rgba(0,0,0,0.1)", height: "18%", position: "absolute", right: "18%", top: "5%", textAlign: "center" }}
              onClick={handletomainpage}>
              首页
            </Button>
          </div>
    
          <div style={{ width: "100%", position: "absolute", top: "12vh", borderRadius: "10px", overflow: "hidden" }}>
            <div style={{ width: "100vw", backgroundColor: "#FFFFFF", overflowY: "scroll" }}>
              <div style={{ width: "100%", height: "1.9rem", position: "relative", lineHeight: '1.9rem' }}>
                {/* <div style={{ width: "90%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left" }}>
                  &nbsp;&nbsp;<span style={{ fontWeight: "800" }}>查询条件</span>：
                  <Search
                    placeholder="根据检验编号查询"
    
                    onSearch={(e) => { searchgpdbyjybh(e) }}
                    style={{ width: 200, marginTop: '0.2rem' }}
                  /></div> */}
              </div>
              <List
                itemLayout="horizontal"
                dataSource={pagedata.nowddata}
                renderItem={item => (
    
                  <div style={{
                    height: "6.6 rem", width: "95%", marginLeft: "2.5%", backgroundColor: "white", marginTop: "0.5rem", marginBottom: "0.5rem", position: "relative", paddingTop: "0.5rem",
                    fontWeight: "400", fontSize: "0.6rem", borderRadius: "5px", overflow: "hidden", textAlign: 'left', boxShadow: "0px 0px 5px  rgba(0, 0, 0, 0.25)",
                    borderStyle: "none", borderWidth: "0.05rem", borderColor: "#B8B8B8"
                  }}
                  >
                    <div style={styles.linenormal}>
                      <div style={{ width: "50%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left", fontWeight: "700",
                        color:"#377AF6"
                       }}>
                        &nbsp;&nbsp;序号：{item.key + 1}</div>
                      <div style={styles.lineleftstyle}>
                        <span style={{ fontWeight: "bolder" }}></span>&nbsp;&nbsp;</div>
                    </div>
    
                    {/* <Normalitem label="单据号" keyd="djh" item={item}  /> */}
                    <Normalitemtwo label="生产主任" keyd="sczr" labeltwo="所属车间" keydtwo="sscj" item={item}/>
                    <Normalitemtwo label="生产人" keyd="scr" labeltwo="生产日期" keydtwo="scrq" item={item}/>
                    
                
                    <Button type="primary" style={{
                  margin: "2.5%", fontSize: "0.6rem", height: "1.32rem", width: "30%",
                  lineHeight: "0.6rem",backgroundColor:"white",color:"#717371",borderStyle:"solid",borderColor:"#cfd2cf",
                  borderRadius:"0.2rem",  
                             }} onClick={() => { toitem(item) }}>查看</Button>
    
                  </div>
    
                )}
              />
            </div>
            <Pagination size="small" defaultCurrent={1} total={pagedata.totalnum} style={{ marginBottom: '2vw', marginTop: '2vw' }}
              onChange={onShowSizeChange} current={pagedata.current} pageSize={pagedata.pagesize}
            />
            <div>
            <Button type="primary" style={{
            width: "95%", margin: "2.5%", fontSize: "0.8rem", height: "2rem",
            background: '#377AF6', borderRadius: '0.2rem',
            lineHeight: "0.75rem"
          }}
            onClick={() => { handleadd() }}>新增</Button>
            </div>
    
          </div>
    
        </div>
      )
}

export default Mobile_gpd_list

var styles = {
  titlestyle: {
    height: "6%", width: "100%", position: "absolute", right: "0", lineHeight: "6vh", textIndent: "0rem", textAlign: "center",
    top: "0", backgroundColor: "#C3313A", color: "white", fontSize: "0.9rem", fontWeight: "bolder"
  },
  containertyle: {
    height: "93%", width: "100%", position: "absolute", right: "0", bottom: "0", backgroundColor: "", overflow: "scroll"
  },
  maincontainer: {
    width: "100%", position: "absolute", top: "0%", height: "100%", backgroundColor: "white", overflowY: "scroll", overflowX: "hidden"
  },
  linenormal: { width: "95%", marginLeft: "2.5%", height: "0.8rem", position: "relative" },
  lineitemnormal: { width: "100%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left" },
  lineitemborder: { width: "100%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left", fontWeight: "bolder" },
  lineleftstyle: { width: "50%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" },
  listitemnormal: { width: "100%", height: "0.8rem", position: "relative", fontWeight: "800" },
  listitemleft: { width: "50%", height: "100%", position: "absolute", left: "2%", top: "0", textAlign: "left" },

}